<template>
    <div>
        <div v-if="currentPanel == 'list'" id="illegal">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>违规提醒</span>
                </div>
                <el-row>
                    <el-col :span="4">
                        <el-select v-model="account" placeholder="选择账号" @change="selectAccount">
                            <el-option
                                    v-for="item in users" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="20" style="padding-top: 5px;color: #0e94ea">
                        <i class="el-icon-bell"></i>
                        <span v-if="infraction.infractionAlertStatus == 1">提醒通知：已开启</span>
                        <span v-else>提醒通知：未开启</span>
                        <div class="interspaceH"></div>
                    </el-col>

                    <el-col :span="22">
                        <el-button type="primary" @click="setUp">提醒设置</el-button>
<!--                        <el-divider direction="vertical"></el-divider>-->
                        <el-button type="primary" @click="addKeywords">添加关键词</el-button>&nbsp;&nbsp;
                        <el-tag v-for="tag in keywords" :key="tag.sensitiveWord" closable @close="closeTagHandle(tag)"
                                style="margin-right: 10px"> {{ tag.sensitiveWord }}
                        </el-tag>
                    </el-col>
                </el-row>

                <el-divider id="divider1"></el-divider>

                <el-row>
                    <!--聊天记录列表-->
                    <el-col :span="5">
                        <div style="width: 20vm;font-weight: bold">聊天记录</div>
                        <br/>
                        <div id="chatList" v-for="(itemc,indexc) in accChatRecord" :key="indexc">
                            <el-button class="text" @click="checkRecord(itemc)">
                                <el-row>
                                    <el-col :span="4"><img class="chatRecordImg" :src="itemc.headUrl"></el-col>
                                    <el-col :span="12">
                                        <span class="nickname_style">{{itemc.nickName}}</span>
                                        <span class="text-shenglue"
                                              style="font-size: 12px;color: #9d9d9d;max-width:120px;">{{itemc.lastMessage}}</span>
                                    </el-col>
                                    <el-col :span="8" style="margin-top: 15px">
                                        <span style="font-size: 14px;color: #9d9d9d;text-align: right">{{formatDate(itemc.timestamp,2)}}</span>
                                    </el-col>
                                </el-row>
                            </el-button>
                        </div>
                    </el-col>
                    <el-col :span="0.9">
                        <el-divider direction="vertical" id="vertical"></el-divider>
                    </el-col>
                    <div id="content-pany" style="overflow: scroll;height: 620px;" @scroll="funcScroll">
                        <div style="height: 622px">
                            <el-col id="content-cent" :span="18" style="width: 1193px">
                                <div class="chat-content" style="overflow-y: hidden !important">
                                    <!-- recordContent 聊天记录-->
                                    <!--                             :style="{'transition-timing-function':' cubic-bezier(0.165, 0.84, 0.44, 1)','transition-property': 'transform','transform': 'translateX(0px) translateY(' + translateY +'px) translateZ(1px)','transition-duration': duration + 'ms'}"-->
                                    <div style="display: inline-block;text-align:center;width: 1193px">
                                        <span v-if="isHead" style="color: #afabab;font-size: 14px">已经到顶了！</span>
                                    </div>
                                    <div style="overflow: auto">
                                        <div v-for="(itemc,indexc) in selectClient" :key="indexc">
                                            <!-- 对方 -->
                                            <div class="word" v-if="itemc.mineMsg === 2">
                                                <img :src="itemc.headUrl">
                                                <div class="info">
                                                    <p class="time">{{itemc.nickName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{formatDate(itemc.timestamp,1)}}</p>
                                                    <div style="width: 400px;">
                                                        <div class="info-content"
                                                             style="width: fit-content;word-break: break-word;">
                                                            {{itemc.contactText}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 我的 -->
                                            <div class="word-my" v-else>
                                                <div class="info">
                                                    <p class="time">{{formatDate(itemc.timestamp,1)}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{itemc.nickName}}</p>
                                                    <div style="width: 400px;float:right">
                                                        <div class="info-content"
                                                             style="word-break: break-word;width: fit-content">
                                                            {{itemc.contactText}}
                                                        </div>
                                                    </div>
                                                </div>
                                                <img :src="itemc.headUrl">
                                            </div>
                                        </div>
                                    </div>
                                    <div style="display: inline-block;text-align:center;width: 1193px">
                                        <span v-if="isTail" style="color: #afabab;font-size: 14px">已经到底了！</span>
                                    </div>
                                </div>
                            </el-col>
                        </div>
                    </div>

                </el-row>
            </el-card>
        </div>
        <div v-if="currentPanel == 'setUp'">
            <SetUp :infraction="infraction" @currentHandle="currentHandle"/>
        </div>
    </div>
</template>

<script>
    import SetUp from "@/views/riskControl/illegal_remind/set_up"

    export default {
        components: {
            SetUp,
        },
        data() {
            return {
                isHead: false,
                isTail: false,
                type: 'illegal_remind',
                currentPanel: 'list',
                users: [],
                keywords: [],
                account: '',//要查询的账号
                accChatRecord: [],//查出的聊天列表
                selectClient: {},//与某个客户的聊天详情
                selectUser: {},//选中的列表对象
                infraction: {},
                topHeight: 0,
                num: 0,
            }
        },
        mounted() {
            this.init()
        },
        // 离开这个页面销毁滚动条事件，不然会给每一个页面都触发
        beforeDestroy() {
            window.removeEventListener('scroll', this.funcScroll)
        },
        methods: {
            init(){
                this.getRemind()
                this.getEmpList()
                this.getKeyWords()
                // window.addEventListener('scroll', this.funcScroll, true);
            },
            getRemind(){
                let that = this
                let param = {
                    infractionAlertType: that.type
                }
                this.$request('/api/infraction/getByTitle/1_0', param, 'POST').then((data) => {
                    that.infraction = data.rows[0]
                })
            },
            checkRecord(item) {
                let that = this
                that.num = 0
                this.selectClient = {}
                that.isTail = false
                that.isHead = false
                that.selectUser = item
                this.$request('/api/illegalRemind/getDetailsRecord/1_0',item, 'POST').then((data) => {
                    that.selectClient = data.rows
                }).then(() => {
                    let pany = document.getElementById("content-pany")
                    that.topHeight = pany.scrollHeight
                    // content.scrollTop = 1
                    pany.scrollTop = 1
                })
            },
            selectAccount() {
                let that = this
                that.num = 0
                this.selectClient = {}
                that.isHead = false
                that.isTail = false
                this.$request('/api/illegalRemind/getRecord/1_0?empId=' + this.account, '', 'POST').then((data) => {
                    that.accChatRecord = data.rows
                })
            },
            //查询员工详情
            getEmpList(){
                let that = this
                this.$request('/api/emp/getAllEmp/1_0', {} , 'POST').then((data) => {
                    for (let index in data.rows){
                        that.users.push({
                            value: data.rows[index].empId,
                            label: data.rows[index].empName,
                        })
                    }
                })
            },
            setUp() {
                this.currentPanel = 'setUp'
            },
            currentHandle(e) {
                this.currentPanel = e;
            },
            closeTagHandle(tag) {
                let that = this
                this.$request('/api/sensitive/delete/1_0?id='+ tag.sensitiveId, '', 'POST').then((data) => {
                    that.getKeyWords();
                    this.$message({
                        type: 'success',
                        message: '删除成功！'
                    });
                })
            },
            addKeywords() {
                this.$prompt('请输入关键词', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    if (value == null){
                        this.$message({
                            type: 'error',
                            message: '不能添加空关键词！'
                        });
                        return;
                    }
                    let that = this;
                    let param = {
                        sensitiveWord: value,
                        sensitiveType: that.type
                    }
                    this.$request('/api/sensitive/addKeyword/1_0', param, 'POST').then((data) => {
                        that.getKeyWords();
                        this.$message({
                            type: 'success',
                            message: '添加关键词 "' + value + '" 成功！'
                        });
                    })

                })
            },
            getKeyWords(){
                let that = this;
                this.$request('/api/sensitive/getKeyword/1_0', {sensitiveType:that.type}, 'POST').then((data) => {
                    that.keywords = data.rows
                })
            },
            //时间戳转换时间格式, type=1 带时间; type=2 不带时间
            formatDate(value, type) {
                var timer = ''
                if (value == null) {
                    return '';
                } else {
                    let date = new Date(value);
                    let y = date.getFullYear();// 年
                    let MM = date.getMonth() + 1;// 月
                    MM = MM < 10 ? ('0' + MM) : MM;
                    let d = date.getDate();// 日
                    d = d < 10 ? ('0' + d) : d;
                    let h = date.getHours();// 时
                    h = h < 10 ? ('0' + h) : h;
                    let m = date.getMinutes();// 分
                    m = m < 10 ? ('0' + m) : m;
                    let s = date.getSeconds();// 秒
                    s = s < 10 ? ('0' + s) : s;
                    if (type === 1) {
                        timer = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
                    } else if (type === 2) {
                        timer = y + '-' + MM + '-' + d;
                    }
                }
                return timer
            },
            funcScroll(e) {
                if (this.num === 0){
                    this.num ++
                    return
                }
                let that = this
                if (e.target.scrollTop === 0 && !this.isHead){
                    let params = 'empId='+this.account + '&targetId=' + that.selectUser.userId + '&type=' + that.selectType + '&slidetype=' + 1 + '&chatMessageId=' + that.selectClient[0].chatMessageId;
                    this.$request('/api/sessionContent/getSlideQuery/1_0?' + params,'', 'POST').then((data) => {
                        if (data.rows != null && data.rows.length != 0){
                            that.selectClient = [...data.rows, ...that.selectClient]
                        }
                        if (data.rows === null || data.rows.length === 0 || data.rows.length < 20){
                            that.isHead = true
                        }
                    }).then(() => {
                        let pany = document.getElementById("content-pany")
                        pany.scrollTop = pany.scrollHeight - that.topHeight
                        that.topHeight = pany.scrollHeight
                    })
                }
                if (e.target.clientHeight + e.target.scrollTop === e.target.scrollHeight && !this.isTail){
                    let params = 'empId='+this.account + '&targetId=' + that.selectUser.userId + '&type=4&slidetype=' + 2 + '&chatMessageId=' + that.selectClient[that.selectClient.length - 1].chatMessageId;
                    this.$request('/api/sessionContent/getSlideQuery/1_0?' + params,'', 'POST').then((data) => {
                        if (data.rows != null && data.rows.length !== 0){
                            that.selectClient = [ ...that.selectClient, ...data.rows]
                        }
                        if (data.rows === null || data.rows.length === 0 || data.rows.length < 20){
                            that.isTail = true
                        }
                    }).then(() => {
                        let pany = document.getElementById("content-pany")
                        this.topHeight = pany.scrollHeight
                    })
                }
            }
        }
    }
</script>

<style>
    #illegal .box-card {
        display: block;
        height: 818px;
    }
    .chat-content {
        width: 100%;
        padding: 20px;
        overflow-y: hidden !important;
    }

    .chat-content .word {
        display: flex;
        margin-bottom: 20px;
    }


    .chat-content .word img {
        margin-top: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .chat-content .word .info {
        margin-left: 10px;
    }

    .chat-content .word .info .time {
        font-size: 12px;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
    }

    .chat-content .word .info .info-content {
        padding: 10px;
        font-size: 14px;
        background: rgba(174, 176, 179, 0.99);
        position: relative;
        margin-top: 8px;
    }

    .chat-content .word .info .info-content::before {
        position: absolute;
        left: -8px;
        top: 8px;
        content: '';
        border-right: 10px solid #aeb0b3;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }

    .word-my {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
    }

    .word-my img {
        margin-top: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .word-my .info {
        width: 90%;
        margin-left: 10px;
        text-align: right;
    }

    .word-my .info .time {
        font-size: 12px;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
        margin-right: 10px;
    }

    .word-my .info .info-content {
        max-width: 70%;
        padding: 10px;
        font-size: 14px;
        float: right;
        margin-right: 10px;
        position: relative;
        margin-top: 8px;
        background: #A3C3F6;
        text-align: left;
    }

    .word-my .info .info-content::after {
        position: absolute;
        right: -8px;
        top: 8px;
        content: '';
        border-left: 10px solid #A3C3F6;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }

    #vertical {
        display: inline-block;
        width: 1px;
        height: 60vh;
        margin-right: 0;
        vertical-align: middle;
        position: relative;
    }

    #divider1 {
        display: block;
        height: 1px;
        width: 100%;
        margin: 24px auto 0 auto;
    }

    .chatRecordImg {
        width: 40px;
        height: 40px;
    }

    .text-shenglue {
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -icab-text-overflow: ellipsis;
        -khtml-text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        font-size: 12px;
        color: #9d9d9d;
        max-width:120px;
        padding-top: 8px;
    }

    #chatList .text {
        border: 0 solid #DCDFE6;
        padding: 0;
        width: 100%;
        text-align: left;
    }
    #chatList .text .nickname_style{
        font-size: 16px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
